<template>
  <main>
    <div class="chat-left-list">
      <!-- 这是一个搜索框 -->
      <div class="search">
        <input type="text" placeholder="搜索" />
      </div>
      <div class="chatList">
        <chatItem
          v-for="chatItem in chatList"
          :key="chatItem.id"
          :chatItem="chatItem"
          :active="chatItem.id === id"
          @click="getMessageList(boss.uuid, chatItem.id)"
        ></chatItem>
      </div>
    </div>
    <div class="chat-center-message" v-if="messageList !== null">
      <div class="header">
        <span>黄石北</span>
        <span class="online"><i></i>在线 ></span>
      </div>
      <ul class="chat-center-message__content" ref="recordList">
        <li v-for="messageItem in messageList" :key="messageItem.id">
          <messageItem
            :messageItem="messageItem"
            :signType="signType"
            :username="boss.realname"
          ></messageItem>
        </li>
      </ul>
      <messageControl
        :dialogueInfo="dialogueInfo"
        :boss="true"
        @scrollToBottom="scrollToBottom"
      ></messageControl>
    </div>
    <div class="chat-no-data" v-else>
      <img src="../../../assets/icons/AI聊天机器人.png" alt="" />
      <p>请选择一个聊天对象吧!</p>
    </div>
    <div class="chat-right-info__content" v-if="person && resume">
      <personInfo :person="person" :resume="resume"></personInfo>
    </div>
  </main>
</template>

<script setup lang="ts">
import chatItem from '@/components/chat/chatItem.vue'
import messageItem from '@/components/chat/messageItem.vue'
import personInfo from '@/views/BOSS/Chat/chatComponent/personInfo.vue'
import messageControl from '@/components/chat/messageControl.vue'
import{getMessageLists , getPerson,getResume} from '@/api/mock'
import { nextTick } from 'vue'
import { useBossStore } from '@/store/modules/boss'
import { useWebSocketStore } from '@/store/modules/webSocket'
import { toRefs } from 'vue'
const bossStore = useBossStore()
const webSocketStore = useWebSocketStore()
const { boss, getBossInfo, signType } = bossStore
const chatList = ref([])
const mockMessageLists = ref([])
const { messageList } = toRefs(webSocketStore)
const inputValue = ref('')
const persons = ref([])
const person = ref(null)
const resumes = ref(null)
const resume = ref(null)
const openAI = ref(false)
// 获取消息列表实例
const recordList = ref(null)
// 存储对话人的信息
const dialogueInfo = ref(null)
if (history.state.dialogueInfo) {
  dialogueInfo.value = JSON.parse(history.state.dialogueInfo)
  // 清除dialogueInfo
  history.replaceState(null, '')
}


getMessageLists().then((res) => {
  mockMessageLists.value = res
})

getPerson().then((res) => {
  persons.value = res
  console.log("persons",persons.value);
})


getResume().then((res) => {
  console.log("resumes",res);
  resumes.value = res
  console.log("resumes",resumes.value);
})
const id = ref(-1)
const bascBossUrl = 'http://localhost:8080/api/images/companyLogo/'
const bascGeekUrl = 'http://localhost:8080/api/images/userProfile/'
// 获取消息列表
webSocketStore.getChatRecord().then((res) => {
  let { code, data, msg } = res.data
  console.log(msg)
  if (code !== 200) {
    console.log(msg)
    return
  }
  console.log('xxxxxxxx', data)
  webSocketStore.messageLists = data
  // 封装chatList消息对象
  data.forEach((item, index) => {
    console.log('item', item);
    let list = {
      avatar: bascGeekUrl + item.recommonResumes.profile ,
      name: item.recommonResumes.name,
      message: item.messages.slice(-1)[0].message,
      time: item.messages.slice(-1)[0].createTime,
      school: '墨西哥大学',
      id: index
    }
    chatList.value.push(list)
  })
})
const getMessageList = (uuid: string, inputId: number) => {
  changeId(inputId)
  webSocketStore.messageList = webSocketStore.messageLists[inputId].messages
  person.value = persons.value[inputId]
  resume.value = resumes.value[inputId]
  // 封装dialogueInfo消息对象
  dialogueInfo.value = {
    username: boss.realname,
    tousername: '黄石北',
    userProfile: boss.profile,
    touserProfile: '443420f646ec4ee1a49d0733dd1882d6.jpg',
    type: '私发',
    userUuid: boss.uuid,
    touserUuid: 'cf123b4b-2073-436a-8ddc-90be850f4924',
    chatgroupId: messageList.value[0].id
  }
  nextTick(() => {
    scrollToBottom()
  })
}

// 发送消息之后默认滚到底部
const scrollToBottom = () => {
  recordList.value.scrollTop = recordList.value.scrollHeight
}
// 初始化ws
async function getBoss() {
  await getBossInfo()
  await webSocketStore.createWebSocket(boss.realname).catch((err) => {
    console.log(err)
  })
}
getBoss()

const changeId = (inputId: number) => {
  id.value = inputId
}
// 组件销毁时关闭ws
onUnmounted(() => {
  webSocketStore.closeWebSocket()
})
</script>

<style scoped>
main {
  display: flex;
  width: 1184px;
  height: var(--windowHeight);
  margin: 0 auto;
  transition: all 0.3s linear;
  background-color: transparent;
  padding: 8px;
  border-radius: 12px;
}

main::after {
  content: '';
  position: absolute;
  display: block;
  min-width: var(--windowWidth);
  height: 100vh;
  inset: 0;
  background: var(--childThemeColor);
  z-index: -1;
}

.chat-left-list {
  width: 20%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px;
  position: relative;
  background: #f1f0f0;
}

.chat-left-list .search {
  display: flex;
  width: 92%;
  height: 40px;
  justify-content: space-around;
  padding: 10px;
  background-color: rgba(255, 245, 247, 0.8);
  border: 1px solid #eae9e9;
  position: sticky;
  top: 0;
}

.chat-left-list .search input {
  width: 80%;
  height: 100%;
  padding: 0 10px;
  border-radius: 20px;
  border: none;
}

.chatList {
  height: 60%;
  overflow-y: auto;
  overflow-x: hidden;
}
.chat-center-message {
  flex: 1;
  position: relative;
  padding: 54px 8px 100px 8px;
  background: url('../../../assets/icons/背景.png') no-repeat center center;
  border-radius: 12px;
  border-top-left-radius: 0px;
}

.chat-center-message .header {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  justify-content: start;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-16);
  padding: 12px 24px;
  border-radius: 0 12px 0 0;
}
.online {
  display: flex;
  font-size: var(--font-12);
  align-items: center;
}
.online i {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #13ce66;
  border-radius: 50%;
  margin-right: 5px;
}

.chat-no-data {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 850px;
}

.chat-no-data p {
  font-size: var(--font-16);
  margin-top: 20px;
}

.chat-no-data img {
  width: 300px;
  height: 300px;
}

.chat-center-message__content {
  height: 80%;
  overflow-y: auto;
}

.chat-center-message__input {
  display: flex;
  position: absolute;
  height: 150px;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  background-color: var(--childThemeColor);
  align-items: center;
  justify-content: space-evenly;
}

.chat-center-message__input textarea {
  flex: 1;
  resize: none;
  padding: 10px;
  height: 130px;
  margin-right: 10px;
  margin-top: auto;
  border-radius: 12px;
}

.chat-center-message__input button {
  height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  background-color: var(--themeColor);
  color: #fff;
  border: none;
  margin-top: auto;
}

.chat-right-info__content {
  width: 30%;
  overflow-y: auto;
  padding: 0 10px 10px 10px;
  overflow-y: auto;
}

.AI-assisted {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /* 磨砂背景效果 */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
}

.AI-assisted p {
  font-size: var(--font-16);
  text-align: center;
  padding: 10px;
}

.AI-assisted img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
</style>
